<!doctype html>
<html lang="en">
  <head>
    <script src="index.js" type="module"></script>
    <script src="../../helpers/header.js" type="module"></script>
    <link rel="stylesheet" href="style.css" />
    <title>password-generator</title>
  </head>
  <body>
    <div id="clipboard-container" class="clipboard-container">
      <p>Copied to clipboard</p>
    </div>
    <div class="container text-center">
      <form class="password-form">
        <div class="input-holder">
          <input type="text" class="password" readonly />
          <button class="copy-btn">
            <img
              class="copy"
              src=""
              alt="copy"
              height="24px"
              width="24px"
            />
          </button>
        </div>
        <div>
          <label>
            Character length
            <span class="char-length">6</span>
          </label>
        </div>
        <input type="range" id="range" min="6" max="24" />

        <div>
          <input type="checkbox" id="lc" />
          <label for="lc">Include Lowercase</label>
        </div>

        <div>
          <input type="checkbox" id="uc" />
          <label for="uc">Include Uppercase</label>
        </div>

        <div>
          <input type="checkbox" id="numbers" />
          <label for="numbers">Include Numbers</label>
        </div>

        <div>
          <input type="checkbox" id="symbols" />
          <label for="symbols">Include Symbols</label>
        </div>

        <input type="submit" class="btn btn-primary" value="Generate" />
      </form>

      <div class="rememberPass-container">
        <label
          >Remember your password:
          <p id="rememberPass">
            Remember your password with the first character of each word in this sentence.
          </p>
        </label>
      </div>
    </div>
  </body>
</html>
